<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置 - AI聊天应用</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        :root {
            --bg-primary: #f5f7fb;
            --bg-secondary: #ffffff;
            --text-primary: #333333;
            --text-secondary: #6b7280;
            --border-color: #f0f0f5;
            --highlight: linear-gradient(135deg, #6366f1, #8b5cf6);
            --shadow-color: rgba(0,0,0,0.05);
        }
        
        body.dark-mode {
            --bg-primary: #121212;
            --bg-secondary: #1e1e1e;
            --text-primary: #e0e0e0;
            --text-secondary: #a0a0a0;
            --border-color: #2a2a2a;
            --shadow-color: rgba(0,0,0,0.2);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            height: 100vh;
            margin: 0;
            overflow: hidden;
            background-color: var(--bg-primary);
            color: var(--text-primary);
            transition: all 0.3s ease;
        }
        .bottom-bar {
            height: 70px;
            background-color: var(--bg-secondary);
            border-top: 1px solid var(--border-color);
            display: flex;
            justify-content: space-around;
            align-items: center;
            position: fixed;
            bottom: 0;
            width: 100%;
            box-shadow: 0 -2px 10px var(--shadow-color);
        }
        .tab {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 8px 16px;
            color: #8e8e93;
            transition: all 0.2s;
        }
        .tab.active {
            color: #6366f1;
        }
        .tab:hover {
            color: #6366f1;
        }
        .settings-container {
            height: calc(100vh - 70px);
            overflow-y: auto;
            padding-bottom: 70px;
        }
        .settings-group {
            margin-bottom: 20px;
            background-color: var(--bg-secondary);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 1px 3px var(--shadow-color);
        }
        .settings-item {
            padding: 16px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: all 0.2s;
        }
        .settings-item:hover {
            background-color: rgba(99, 102, 241, 0.05);
        }
        .settings-item:last-child {
            border-bottom: none;
        }
        .toggle {
            width: 50px;
            height: 28px;
            background-color: #e2e8f0;
            border-radius: 17px;
            position: relative;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }
        .toggle.active {
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
        }
        .toggle-circle {
            width: 26px;
            height: 26px;
            background-color: white;
            border-radius: 50%;
            position: absolute;
            top: 1px;
            left: 1px;
            transition: transform 0.2s ease;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .toggle.active .toggle-circle {
            transform: translateX(22px);
        }
        .header-gradient {
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
        }
        .section-title {
            padding: 0 20px;
            margin-top: 20px;
            margin-bottom: 8px;
            color: #6366f1;
            font-weight: 600;
            font-size: 14px;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }
        .back-button {
            display: flex;
            align-items: center;
            color: white;
            font-size: 16px;
            background: none;
            border: none;
            cursor: pointer;
            padding: 8px;
            border-radius: 50%;
            background: rgba(255,255,255,0.2);
            width: 36px;
            height: 36px;
            justify-content: center;
            transition: all 0.2s;
        }
        .back-button:hover {
            background: rgba(255,255,255,0.3);
        }
        .page-title {
            font-size: 22px;
            font-weight: 700;
            margin-top: 12px;
            color: white;
        }
        .settings-value {
            color: var(--text-secondary);
            font-size: 14px;
        }
        .action-button {
            color: #6366f1;
            font-weight: 500;
            transition: all 0.2s;
        }
        .action-button:hover {
            color: #4f46e5;
        }
        .danger-text {
            color: #ef4444;
        }
        .danger-text:hover {
            color: #dc2626;
        }
        .theme-icon {
            font-size: 20px;
            margin-right: 8px;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <div class="header-gradient py-4 px-5 pb-6">
        <div class="flex items-center">
            <a href="chat.html" class="back-button">
                <i class="fas fa-arrow-left"></i>
            </a>
        </div>
        <div class="page-title">设置</div>
    </div>

    <!-- 设置容器 -->
    <div class="settings-container">
        <!-- 界面设置 -->
        <div class="section-title">界面设置</div>
        <div class="settings-group mx-4">
            <div class="settings-item">
                <div class="flex items-center">
                    <i class="fas fa-moon theme-icon"></i>
                    <div>
                        <div class="font-medium">深色模式</div>
                        <div class="text-sm text-gray-500">启用应用深色模式</div>
                    </div>
                </div>
                <div id="dark-mode-toggle" class="toggle">
                    <div class="toggle-circle"></div>
                </div>
            </div>
        </div>

        <!-- 数据设置 -->
        <div class="section-title">数据与隐私</div>
        <div class="settings-group mx-4">
            <div class="settings-item">
                <div class="flex items-center">
                    <i class="fas fa-history theme-icon"></i>
                    <div>
                        <div class="font-medium">保存历史记录</div>
                        <div class="text-sm text-gray-500">在本地存储聊天记录</div>
                    </div>
                </div>
                <div id="save-history-toggle" class="toggle active">
                    <div class="toggle-circle"></div>
                </div>
            </div>
            <div id="clear-data" class="settings-item">
                <div class="flex items-center">
                    <i class="fas fa-trash theme-icon text-red-500"></i>
                    <div>
                        <div class="font-medium danger-text">清除所有数据</div>
                        <div class="text-sm text-gray-500">删除所有本地储存的聊天记录</div>
                    </div>
                </div>
                <i class="fas fa-chevron-right text-red-500"></i>
            </div>
        </div>

        <!-- 关于 -->
        <div class="section-title">关于</div>
        <div class="settings-group mx-4">
            <div class="settings-item">
                <div class="flex items-center">
                    <i class="fas fa-info-circle theme-icon"></i>
                    <div class="font-medium">版本</div>
                </div>
                <div class="settings-value">1.0.0</div>
            </div>
            <div class="settings-item">
                <div class="flex items-center">
                    <i class="fas fa-question-circle theme-icon"></i>
                    <div class="font-medium">帮助与反馈</div>
                </div>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
            <div class="settings-item">
                <div class="flex items-center">
                    <i class="fas fa-shield-alt theme-icon"></i>
                    <div class="font-medium">隐私政策</div>
                </div>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
        </div>
        
        <div class="py-6 text-center text-sm text-gray-500">
            AI聊天应用 © 2023 版权所有
        </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="bottom-bar">
        <a href="chat.html" class="tab">
            <i class="fas fa-comment text-lg"></i>
            <span class="text-xs mt-1">聊天</span>
        </a>
      
        <div class="tab active">
            <i class="fas fa-cog text-lg"></i>
            <span class="text-xs mt-1">设置</span>
        </div>
    </div>

    <script>
        // 切换按钮功能
        document.addEventListener('DOMContentLoaded', function() {
            // 检查并应用当前的主题模式
            applyThemeMode();
            
            // 获取所有的切换按钮
            const toggles = document.querySelectorAll('.toggle');
            
            // 为每个切换按钮添加点击事件
            toggles.forEach(toggle => {
                toggle.addEventListener('click', function() {
                    this.classList.toggle('active');
                    
                    // 保存切换状态
                    const settingId = this.id;
                    const isActive = this.classList.contains('active');
                    
                    if (settingId) {
                        localStorage.setItem(settingId, isActive);
                        
                        // 如果是深色模式切换
                        if (settingId === 'dark-mode-toggle') {
                            if (isActive) {
                                document.body.classList.add('dark-mode');
                            } else {
                                document.body.classList.remove('dark-mode');
                            }
                        }
                    }
                });
                
                // 从本地存储加载设置状态
                const settingId = toggle.id;
                if (settingId) {
                    const isActive = localStorage.getItem(settingId) === 'true';
                    if (isActive) {
                        toggle.classList.add('active');
                    } else if (localStorage.getItem(settingId) === 'false') {
                        toggle.classList.remove('active');
                    }
                }
            });
            
            // 清除所有数据按钮
            document.getElementById('clear-data').addEventListener('click', function() {
                if (confirm('确定要删除所有聊天记录吗？此操作无法撤销。')) {
                    localStorage.removeItem('ai-chats');
                    alert('所有聊天记录已清除。');
                }
            });
        });
        
        // 应用当前的主题模式
        function applyThemeMode() {
            const isDarkMode = localStorage.getItem('dark-mode-toggle') === 'true';
            if (isDarkMode) {
                document.body.classList.add('dark-mode');
            } else {
                document.body.classList.remove('dark-mode');
            }
        }
    </script>
</body>
</html> 